import React, { useEffect, useState } from "react";
import { Tabs, Table, Spin } from "antd";
import styles from "./index.module.less";
import { getTermMapping, getHandResult } from "../api/index.ts";

const App: React.FC = (props) => {
  const [loading1, setLoading1] = useState(false);
  const [loading2, setLoading2] = useState(false);
  const [topTabs, setTopTabs] = useState([])
  const [bottomTabs, setBottomTabs] = useState([])

  const handleTabChange = (e) => {
    console.log(e);
  };
  const handleTab2Change = (e) => {
    console.log(e);
  };
  const fetchData = () => {
    setLoading1(true);
    setLoading2(true);
    getTermMapping(props.params).then(res => {
      res.data.tabs.forEach(item => {
        item.tableData.forEach(i => {
          i.key = i.id
        })
        if (item.columns.length > 0) {
          item.children = 
            <Table
              columns={item.columns}
              dataSource={item.tableData}
              bordered
              pagination={false}
              scroll={{ x: 590, y: 290 }}
            />
        }
      })
      setTopTabs(res.data.tabs);
      setLoading1(false);
    })
    getHandResult(props.params).then(res => {
      res.data.tabs.forEach(item => {
        item.children = <div className={styles.content}>{item.results}</div>
      })
      setBottomTabs(res.data.tabs);
      setLoading2(false);
    })
  }

  useEffect(() => {
    if (JSON.stringify(props.params) == '{}') {
      return
    } else {
      fetchData();
    }
  },[props.params])

  return (
    <div className={styles.right_card}>
      <div className={styles.card_title}>
        <span className={styles.line}></span>
        <span>术语映射</span>
      </div>
      <Spin spinning={loading1} tip="loading" className={styles.loading} size="large">
       <Tabs defaultActiveKey="1" className={styles.tabsContent} animated={{ tabPane: true }} items = {topTabs} onChange={handleTabChange}></Tabs>
      </Spin>
      <div className={styles.card_title}>
        <span className={styles.line}></span>
        <span>模型推理结果</span>
      </div>
      <Spin spinning={loading2} tip="loading" className={styles.loading} size="large">
       <Tabs defaultActiveKey="1" className={styles.tabsContent} animated={{ tabPane: true }} items = {bottomTabs} onChange={handleTab2Change}></Tabs>
      </Spin>
    </div>
  );
};


export default App;
